<template>
  <div>
    <el-form :inline="true" :model="searchModel" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input
          v-model="searchModel.searchItem.role_name"
          placeholder="角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-select
          v-model="searchModel.searchItem.role_status"
          placeholder="全部"
        >
          <el-option label="全部" value="0"></el-option>
          <el-option label="有效" value="1"></el-option>
          <el-option label="无效" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-button @click="searchRole">搜索</el-button>
      <el-button @click="openRoleAdd">添加</el-button>
    </el-form>
    <el-table ref="filterTable" :data="pageModel.data" style="width: 100%">
      <el-table-column prop="role_id" label="角色Id"> </el-table-column>
      <el-table-column prop="role_name" label="角色名称"> </el-table-column>

      <el-table-column prop="role_status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.role_status === 1 ? 'success' : 'primary'"
            disable-transitions
            >{{ scope.row.role_status == 1 ? "有效" : "无效" }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="openUpdate(scope.row.role_id)"
            type="text"
            size="small"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="searchRole"
      @current-change="searchRole"
      :current-page.sync="searchModel.pageIndex"
      :page-sizes="[2, 4, 6, 8]"
      :page-size.sync="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageModel.total"
    >
    </el-pagination>

    <el-dialog
      :title="editModel.editType == 1 ? '角色添加' : '角色修改'"
      :visible.sync="editModel.isShowEdit"
    >
      <el-form
        ref="form"
        :model="editModel.roleInfo"
        :rules="editModel.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" :prop="editModel.roleInfo.role_name">
              <el-input v-model="editModel.roleInfo.role_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色状态">
              <el-switch
                v-model="editModel.roleInfo.role_status"
                active-text="有效"
                inactive-text="无效"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="角色权限">
              <!-- efault-expanded-keys 默认打开的节点-->
              <!-- default-checked-keys 默认打开的节点-->
               <el-tree
              ref="roleTree"
                show-checkbox
                :data="editModel.moduleData"
                node-key="module_code"
                :default-expanded-keys="editModel.openKeys"
                :default-checked-keys="editModel.roleInfo.roleModuleCode"
                :props="editModel.roleInfo.defaultProps"
              >
              </el-tree>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
            type="primary"
            @click="editModel.editType == 1 ? roleAdd() : roleUpdate()"
            >{{ editModel.editType == 1 ? "立即创建" : "修改保存" }}</el-button
          >
          <el-button @click="quxiao">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageModel: {},

      searchModel: {
        searchItem: {
          role_name: null,
          role_status: null,
        },
        pageIndex: 1,
        pageSize: 2,
      },
      editModel: {
        //添加或者修改操作的model
        roleInfo: {
          roleModuleCode: [], //选中节点和打开节点
        },
        moduleData: [],

        openKeys: [], //默认打开节点
        isShowEdit: false,
        editType: 1,
        defaultProps: {
          children: "sonModules",
          label: "module_name",
        },
        rules: {
          role_name: [{ required: true, message: "请输入角色名" }],
        },
      },
    };
  },
  created() {
    this.searchRole();
  },

  methods: {
    //角色显示
    searchRole() {
      this.$axios
        .post(
          "http://localhost:65253/api/RoleManager/SearchPage",
          this.searchModel
        )
        .then((r) => {
          console.log(r.data.data);
          this.pageModel = r.data;
        });
    },

    iniModuleData() {
      this.$axios
        .get("http://localhost:65253/api/BasehInfoManager/GetModuleDbViewsAll")
        .then((r) => {
          if (r.status == 200) {
            this.editModel.moduleData = r.data;
          }
        });
    },
    //打开添加模态框
    openRoleAdd() {
      this.editModel.isShowEdit = true;
      this.editModel.editType = 1;
      this.editModel.checkKeys = [];
      this.editModel.openKeys = ["system_conter"];
      this.iniModuleData();
    },

    //角色添加
    roleAdd() {
      this.editModel.roleInfo.roleModuleCode = [];
      var checkObj = this.$refs.roleTree.getCheckedNodes();
      checkObj.forEach((item) => {
        this.editModel.roleInfo.roleModuleCode.push(item.module_code);
      });
      this.$axios
        .post(
          "http://localhost:65253/api/RoleManager/RoleDbAdd",
          this.editModel.roleInfo
        )
        .then((r) => {
          if (r.data > 0) {
            this.$message("添加成功");
            this.editModel.isShowEdit = false;
            this.searchRole();
          }
        });
    },
    quxiao() {
      this.editModel.isShowEdit = false;
    },
    openUpdate(roleId) {
      this.$axios
        .get("http://localhost:65253/api/RoleManager/GetRoleViewById", {
          params: {
            roleId: roleId,
          },
        })
        .then((r) => {
          this.iniModuleData();
          this.editModel.roleInfo = r.data;
          this.editModel.isShowEdit = true;
          this.editModel.editType = 2;
          //  this.openKeys = r.data.roleModuleCode;
        });
    },
    roleUpdate() {
      this.editModel.roleInfo.roleModuleCode = [];
      var checkObj = this.$refs.roleTree.getCheckedNodes();
      checkObj.forEach((item) => {
        this.editModel.roleInfo.roleModuleCode.push(item.module_code);
      });
      this.$axios
        .post("http://localhost:65253/api/RoleManager/RoleDbUpdate", this.editModel.roleInfo)
        .then((r) => {
          if (r.data>0) {
            this.$message("修改成功");
            this.editModel.isShowEdit = false;
            this.searchRole();
          }
        });
    },
  },
};
</script>
